import $ from 'jquery'

function transfromFun() {
  var transformStyleArr = $('.canvasDom').css('transform').split(',')
  var translateY = parseFloat(transformStyleArr[5])
  var translateX = parseFloat(transformStyleArr[4])
  var scaleX = transformStyleArr[0].replace(/[^\d.]/g, '')
  var scaleY = parseFloat(transformStyleArr[3])

  $('.canvasDom').on('mousewheel', function (e) {
    scrollFunc('', translateX, translateY, Number(scaleX), scaleY)
    isFirst = false
    $(this).parent().attr('id', 'moveDom')
    $(this).css('cursor', 'move')
    moveFun() // 移动的函数
    e.stopPropagation()
  })
}

var leftValue = 0
var topValue = 0
function moveFun() {
  var drop = document.getElementById('drop')

  //鼠标在拖动条上移动盒子
  $('.canvasDom').bind('mousedown', function (event) {
    var event = event || window.event
    //获取鼠标按下时的位置
    var thisX = event.clientX
    var thisY = event.clientY

    document.onmousemove = function (event) {
      var event = event || window.event
      var moveX = event.clientX
      var moveY = event.clientY

      $('.canvasDom')[0].style.left = leftValue + (moveX - thisX) + 'px'
      $('.canvasDom')[0].style.top = topValue + (moveY - thisY) + 'px'

      window.getSelection
        ? window.getSelection().removeAllRanges()
        : document.selection.empty()
    }
  })
  document.onmouseup = function () {
    document.onmousemove = null
    leftValue = parseFloat($('.canvasDom')[0].style.left)
    topValue = parseFloat($('.canvasDom')[0].style.top)
    $('.canvasDom').css('cursor', 'default')
  }
}

// 缩放 指针缩放
// $(document.getElementById('equipmentIframe').contentWindow).bind('mousewheel', function (e) {
//     scrollFunc()
//     e.stopPropagation();
// })
var isFirst = false
var fact = 0.1
var nx = 0,
  ny = 0,
  factValue = 1,
  nFactValue = 1,
  factValueY = 1,
  nFactValueY = 1
function scrollFunc(e, translateX, translateY, scaleX, scaleY) {
  e = e || window.event
  if (isFirst) {
    nx = translateX
    ny = translateY
    factValue = scaleX
    nFactValue = scaleX
    factValueY = scaleY
    nFactValueY = scaleY
  }

  if (e.wheelDelta) {
    //判断浏览器IE，谷歌滑轮事件
    if (e.wheelDelta > 0) {
      //当滑轮向上滚动时
      factValue += fact
      factValueY += fact
      e.stopPropagation()
    }
    if (factValue < 0.3 || factValueY < 0.3) {
      $.message({
        message: '已缩放到最小了~',
        type: 'warning',
      })
    } else {
      if (e.wheelDelta < 0) {
        //当滑轮向下滚动时
        factValue -= fact
        factValueY -= fact
        e.stopPropagation()
      }
    }
    //计算移动距离
    var leftValue1 = 0 // $('.canvasDom')[0].style.left ? parseFloat($('.canvasDom')[0].style.left) : 0;

    var topValue1 = 0 // $('.canvasDom')[0].style.top ? parseFloat($('.canvasDom')[0].style.top) : 0;
    var x = nx - (factValue - nFactValue) * (e.pageX - leftValue1)
    var y = ny - (factValueY - nFactValueY) * (e.pageY - topValue1)
    $('.canvasDom').css(
      'transform',
      'translate(' +
        x +
        'px, ' +
        y +
        'px) scale(' +
        factValue +
        ',' +
        factValueY +
        ')'
    )
    nx = x
    ny = y
    nFactValue = factValue
    nFactValueY = factValueY
    return false
  } else if (e.detail) {
    //Firefox滑轮事件
    if (e.detail > 0) {
      //当滑轮向上滚动时
      e.stopPropagation()
    }
    if (e.detail < 0) {
      //当滑轮向下滚动时
      e.stopPropagation()
    }
    return false
  }
}
export default transfromFun
